<template>
  <view class="page_min_height page_bg">
    <DataLoading v-if="loading" />
    <template v-else>
      <view
        class="flex justify-between items-center gap-x-12 p-20"
        style="background-image: linear-gradient(to bottom, #f5f6f7, #dfeaff)"
      >
        <view class="flex-1">
          <view class="text-xl font-bold">{{ detailInfo.name }}</view>
          <view class="mt-10 text-xs text-gray-500">执业证号：{{ detailInfo.professional_certificate_no }}</view>
          <view class="mt-5 text-xs text-gray-500">擅长：{{ detailInfo.specialty }}</view>
        </view>
        <view class="flex rounded-md overflow-hidden">
          <image :src="detailInfo.photo" mode="aspectFill" class="w-100 h-100" />
        </view>
      </view>
      <view class="mt-12 px-12">
        <view class="p-12 bg-white rounded-md">
          <view class="text-base font-bold">个人简介</view>
          <view class="mt-12 pt-12 text-gray-500 overflow-hidden border-t border-solid border-gray-100">
            <rich-text class="leading-[1.5]" :nodes="detailInfo.introduction"></rich-text>
          </view>
        </view>
        <!-- 相关文章 -->
        <view v-if="articleList.length" class="mt-12 p-12 bg-white rounded-md">
          <view class="mb-12 text-base font-bold">相关文章</view>
          <view v-for="item in articleList" :key="item.id" class="border-t border-solid border-gray-100">
            <ArticleItem :data="item" />
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getLawyerDetailApi } from '@/api/lawyer';
import { getArticleListApi } from '@/api/article';
import ArticleItem from '@/components/ArticleItem.vue';

const loading = ref(true);
const detailInfo = ref({});
const articleList = ref([]);

onLoad(async ({ id }) => {
  const { code, data } = await getLawyerDetailApi(id);
  loading.value = false;
  if (code === 200) {
    detailInfo.value = data;
  }
  getArticleList();
});

const getArticleList = async () => {
  const { code, data } = await getArticleListApi({
    page: 1,
    limit: 15,
    lawyer_id: detailInfo.value.id,
  });
  if (code === 200) {
    articleList.value = data.list;
  }
};
</script>
